<template>
    <div>
        <h2 class="title1">Re-edit</h2>
        <form @submit.prevent="updatePost">
            <label for="title" class="front">Title</label>
            <input type="text" class="txt0" v-model="post.title" required>
            <br>
            <label for="content" class="front">Content</label>
            <textarea class="txt3" v-model="post.content" required></textarea>
            <br>
            <button type="submit" class="btn">Save</button>
        </form>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            post: {
                title: "",
                content: ""
            }
        };
    },
    mounted() {
        this.getPostData();
    },
    methods: {
        getPostData() {
            const id = this.$route.params.id;
            axios.get(`/api/posts/${id}`)
                .then(response => {
                    this.post = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        updatePost() {
            const id = this.$route.params.id;
            axios.put(`/api/posts/${id}`, this.post)
                .then(response => {
                    console.log(response.data);
                    alert("创建成功")
                    this.$router.replace({ path: "/user/postList" });
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
};
</script>
<style>
.title1{
  margin-top: 145px;
  margin-bottom: 45px;
}
textarea{
  color:#2c3e50;
  font-size: 15px;
  font-weight: bold;
}

.txt3{
  color:#2c3e50;
  font-size: 15px;
  font-weight: bold;
  margin-right:25px;
  outline: none;
  border:2px solid #000000;
  border-radius: 5px;
  background:transparent;
}
</style>